<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Hello JS / JQuery</title>
		<meta name="author" content="aaron" />
		<script src="jquery-1.8.3.min.js" ></script>
		<script src="jquery.animate-colors-min.js"></script>
		<script>
			var colorize = function(init) {
				var colors = ['red', 'orange', 'yellow', 'blue', 'green', 'violet'];

				var panels = $("div.panel");

				var debug = $("div#debug");

				//the dom will convert named colors to rgb values
				var colorConverter = $("div#colorConverter");

				var rand1 = Math.floor((Math.random() * 100));

				for (var i = 0; i < panels.length; i++) {
					var color = colors[(rand1 + i ) % colors.length];

					if (init) {
						var color2 = colors[Math.floor((Math.random() * 100)) % colors.length];
						$(panels[i]).css('background', color2);
					}

					colorConverter.css('background', color);

					$(panels[i]).animate({
						backgroundColor : colorConverter.css('backgroundColor')
					}, 500 + Math.floor((Math.random() * 500)));

					//debug.append("<br />" + color);
				}
			};

			$(document).ready(function() {

				var text = 'Coming Soon'.split('');
				var div = $('div#display');

				for ( i = 0; i < text.length; i++) {
					div.append("<div class='panel'><h1>" + text[i] + "</h1></div>");
				}

				colorize(true);
				setInterval(colorize, 1000);

			});

		</script>
		<style>
			li {
				display: inline
			}

			div.panel {
				width: 9.09%;
				height: 450px;
				float: left;
				text-align: center;
				padding-top: 75px
			}
			div {
				float: left;
				width: 100%;
				height: 100%;
				background: red;
				margin-right: auto;
				margin-left: auto;
			}

		</style>
	</head>
	<body>
		<div>
			<div id="display"></div>
			<div id="colorConverter"></div>
			<div id="debug"></div>
		</div>

	</body>
</html>

